﻿<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
   <script type="text/javascript" src="../Scripts/Plugins/jquery.js"></script>
   <script type="text/javascript" src="../Scripts/Plugins/angular.js"></script>
   <script type="text/javascript" src="../Scripts/Plugins/angular-resource.js"></script>
   <script type="text/javascript" src="../Scripts/Plugins/purl.js"></script>
   <script type="text/javascript" src="../Scripts/Plugins/moment.js"></script>
   <script type="text/javascript" src="../Scripts/Plugins/livestamp.js"></script>
   <script type="text/javascript" src="../Scripts/Plugins/crypto.js"></script>
   <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
   <script type="text/javascript" src="../_layouts/15/sp.runtime.js"></script>
   <script type="text/javascript" src="../_layouts/15/sp.js"></script>
   <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
   <meta name="WebPartPageExpansion" content="full" />
   <link href="../_layouts/15/1033/styles/Themable/corev15.css" type="text/css" rel="stylesheet" />
   <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
   <!-- Add your CSS styles to the following file -->
   <link rel="Stylesheet" type="text/css" href="../Content/App.css" />
   <!-- Add your JavaScript to the following file -->
   <script type="text/javascript" src="../Scripts/App.min.js"></script>
</asp:Content>
<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
   Prove content
</asp:Content>
<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
   <WebPartPages:AllowFraming runat="server" ID="AllowIFraming1" />
   <div ng-app="proofOfExistenceApp">
      <div ng-controller="AppCtrl">
         <div ng-show="error">
            <p>Something went wrong</p>
            <p>{{error_message}}</p>
         </div>
         <div ng-show="status != null">
            <ul class="nav nav-pills">
               <li class="active activated">
                  <a href="#register" data-toggle="pill">
                     <div ng-show="status == 'nonexistent' ">
                        <span  class="glyphicon glyphicon-hand-right"></span>
                        Register
                     </div>
                     <div ng-show="status != 'nonexistent' ">
                        <span class="glyphicon glyphicon-thumbs-up"></span>
                        Registered
                     </div>
                  </a>
               </li>
               <li class="idle disabled" ng-show="(status == 'nonexistent' && wallet_id == null) || (status == 'nonexistent' && wallet_id != null && wallet_balance < (0.0051 * 1.01)) "><a href="#" data-toggle="">
                  <span  class="glyphicon glyphicon-remove"></span>
                  Pay</a>
               </li>
               <li class="active activated" ng-show="(status != 'nonexistent' && wallet_id == null) || (status != 'nonexistent' && wallet_id != null && wallet_balance < (((price / 100000000) + 0.0001) * 1.01))" >
                  <a href="#pay" data-toggle="pill">
                     <div ng-show="status == 'registered' ">
                        <span  class="glyphicon glyphicon-hand-right"></span>
                        Pay
                     </div>
                     <div ng-show="status == 'pending' || status == 'confirmed'">
                        <span  class="glyphicon glyphicon-thumbs-up"></span>
                        Payed
                     </div>
                  </a>
               </li>
               <li class="idle disabled" ng-show="status == 'nonexistent' ||  status == 'registered' "><a href="#" data-toggle="">
                  <span class="glyphicon glyphicon-remove"></span>
                  Proof of Existence</a>
               </li>
               <li class="active activated" ng-show="status == 'pending' ||  status == 'confirmed'"><a id="poetab" href="#proofofexistence" data-toggle="pill">
                  <span ng-show="status == 'pending' " class="glyphicon glyphicon-hand-right"></span>
                  <span ng-show="status == 'confirmed'" class="glyphicon glyphicon-thumbs-up"></span>
                  Proof of Existence</a>
               </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content" ng-switch on="status">
               <div  ng-switch-when="registered">
                  <div class="tab-pane" id="register">
                     <p>{{filename}} registered <span data-livestamp="{{registered_at}}"></span></p>
                  </div>
                  <div class="tab-pane active" id="pay">
                     <p>To complete, please send ฿ {{price / 100000000}} to {{pay_address}}</p>
                     <img id="qrimg" alt="qr" src="{{qr_img_link}}" />
                  </div>
               </div>
               <div  ng-switch-when="pending">
                  <div class="tab-pane active" id="proofofexistence">
                     <p>Proof of Existence is waiting for <a href="{{detail_link}}" target="_blank">confirmation</a></p>
                  </div>
               </div>
               <div  ng-switch-when="confirmed">
                  <div class="tab-pane active" id="proofofexistence">
                     <p><a href="{{detail_link}}" target="_blank">Proof of Existence</a> for {{filename}}</p>
                  </div>
               </div>
               <div ng-switch-default>
                  <div class="tab-pane active" id="register">
                     <p><a href="#" ng-click="register()">Register</a> {{filename}} to create a Proof of Existence</p>
                  </div>
               </div>
            </div>
         </div>
         <div ng-show="doclibid == null && docid ==  null">
            <ul class="nav nav-pills">
               <li id="contentTab" class="active"><a href="#content" data-toggle="pill">
                  Content</a>
               </li>
               <li class="" ><a href="#wallet" data-toggle="pill">
                  Shared wallet</a>
               </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
               <div class="tab-pane" id="content">
                  <table class="table">
                     <thead>
                        <tr>
                           <th>Document</th>
                           <th>Status</th>
                           <th>Registered</th>
                           <th></th>
                        </tr>
                     </thead>
                     <tbody>
                        <tr ng-repeat="registration in all_registrations">
                           <td><a href="{{registration.filelink}}" target="_blank">{{registration.filename}}</a></td>
                              <td class="danger" ng-show="registration.status == 'registered'">{{registration.status}}</td>
                              <td class="warning" ng-show="registration.status == 'pending'">{{registration.status}}</td>
                              <td class="success" ng-show="registration.status == 'confirmed'">{{registration.status}}</td>
                           <td><span data-livestamp="{{registration.registered_at}}"></span></td>
                           <td><a href="{{registration.detail_link}}" target="_blank">Details</a></td>
                        </tr>
                     </tbody>
                  </table>
               </div>
               <div class="tab-pane" id="wallet">
                  <div ng-show="wallet_id == null">
                     <p><a href="#" ng-click="create_new_wallet()">Create</a> a new shared wallet</p>
                  </div>
                  <div ng-show="wallet_id != null">
                     <div class="row">
                        <div class="col-lg-2">Balance</div>
                        <div class="col-lg-2">{{wallet_balance}}</div>
                     </div>
                     <div class="row">
                        <div class="col-lg-2">Address</div>
                        <div class="col-lg-2">{{wallet_address}}</div>
                     </div>
                     <div class="row" ng-show="!show_wallet_qr">
                        <div class="col-lg-2"><a href="#" ng-click="show_wallet_qr = true">Show QR</a></div>
                     </div>
                     <div class="row" ng-show="show_wallet_qr">
                        <div class="col-lg-2"><a href="#" ng-click="show_wallet_qr = false">Hide QR</a></div>
                        <div class="col-lg-2"><img id="walletqrimg" alt="qr" src="{{wallet_qr}}" /> </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</asp:Content>
